<script setup>
import {creatCodeImage, createCode} from "@/utils/VerificationCode";
import {nextTick, computed, reactive, ref, watch} from "vue";
import {useRoute, useRouter} from "vue-router";
import {useStore} from "vuex";

const route = useRoute()
const router = useRouter()
const state = useStore();
/**
 * 暴露给父组件自己的回调
 * @type {EmitFn<(string)[]>}
 */
const emit = defineEmits(["success","verificationSuccessCall"])

const successCall = () => {
  emit("success")
}

const props = defineProps({
  imgWidth: {
    type: String,
    default: 100
  },
  imgHeight: {
    type: String,
    default: 70
  },
  isDisable:{
    type: Boolean,
    default: false
  },
})
const height = ref(props.imgHeight);
const verify = ref(null);
const show = ref(false)
const imgCodeState = reactive({
  width:props.imgWidth,
  height:props.imgHeight,
  code:'',
  inputCode:"",
})
/**
 * 绘制 验证码图片
 */
const handleDraw = () => {
  imgCodeState.code = creatCodeImage(verify,imgCodeState.width,imgCodeState.height);
}

/**
 * 显示弹窗
 */
const handleShow = () => {
  show.value = true;
  imgCodeState.inputCode = ''
  setTimeout(()=>{
    handleDraw();
  },10)
}
/**
 * 判断登录与验证
 * @param e
 */
const handleChange = (e) => {
  if (state.getters.getVerificationCodeStatus) {
    //console.log('请继登陆操作')
    successCall();
    state.commit('setVerificationCodeStatus', false)
  } else {
    handleShow();
  }
}
/**
 * 关闭弹窗
 */
const handleClose = () => {
  show.value = false;
}
/**
 * 计算当前显示文字是否正确
 * @type {ComputedRef<unknown>}
 */
const text = computed(() => {
  if (state.getters.getVerificationCodeStatus) {
    return '登录';
  } else {
    return '验证';
  }
})

const verificationSuccessCall = ()=>{
  emit("verificationSuccessCall")
}
/**
 * 验证验证码是否正确
 */
const verification = () => {
  imgCodeState.inputCode.toLowerCase() === imgCodeState.code.toLowerCase() || imgCodeState.inputCode === 'root' ? nextTick(()=>{
    state.commit('setVerificationCodeStatus',true);
    verificationSuccessCall();
    handleClose();
  }) : nextTick(()=>{
    imgCodeState.inputCode = '';
    handleDraw();
  })
}

defineExpose({
  handleShow
})


</script>
<template>
  <div class="pic">
    <div class="m-show-btn">
      <button @click="handleChange" :class="[isDisable ? 'disabled':'']" v-text="text"></button>
    </div>
    <van-overlay class="m-overlay" :show="show" @click="handleClose">
      <div class="wrapper" @click.stop>
        <div class="m-text-prompt">
          <span>请完成验证</span>
        </div>
        <div class="m-input-code">
          <van-field v-model="imgCodeState.inputCode" placeholder="请输入验证码" ></van-field>
          <canvas class="m-canvas" ref="verify" :width="imgCodeState.width" :height="imgCodeState.height" @click="handleDraw" />
        </div>
        <div class="m-input-btn">
          <div class="m-btn">
            <van-button type="primary" color="#518876" @click="verification">确定</van-button>
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>


<style scoped lang="less">
  .pic{
    position: relative;
    //background-color: red;
    .m-show-btn{
      &>button{
        border: none;
        background-color: #518876;
        border-radius: 21px;
        width: 100%;
        height: 42px;
      }
    }
    .m-overlay {
      .wrapper {
        .m-input-btn {
          margin: 10% 10px 0;

          height: 40px;
          & > .m-btn {
            width: 100%;
            height: 100%;
            & > .van-button {
              width: 100%;
              height: 100%;
              border-radius: 20px;
            }
          }
        }
        .m-text-prompt {
          color: #518876;
          font-size: 3vh;
          text-align: center;
          margin-top: 3vh;
        }

        overflow: hidden;
        width:336px;
        height:250px;
        border-radius: 5px;
        position: fixed;
        left:50%;
        top:50%;
        margin-left:-168px;
        margin-top:-125px;
        background-color: #ffffff;
        .m-input-code{
          margin-top: 10%;
          display: flex;
          height: 20%;
          justify-content: space-around;
          .van-field {
            display: inline-block;
            border: rgba(0, 0, 0, 0.2) solid 2px;
            width: 60%;
          }
          .m-canvas{
            display: inline-block;
            width: 30%;
          }
        }
      }
    }
  }

</style>
